<template>
  <div id="slider">
    <!-- img-container -->
    <div class="slider-img">
      <div class="slider-imgcontainer" ref="container">
        <img v-for="(img,index) in imgs" :src="img.url" alt="img.index" :key="index" />
      </div>
    </div>
    <!-- index -->
    <div class="slider-buttons">
      <span
        v-for="(button,index) in buttons"
        class="slider-imgindex"
        :class="{ 'slider-imgindex-active': currentIndex === button.index }"
        @mouseover="doTheAnimate(button.index)"
        @mouseout="autoAnimate"
        :key="index"
      >{{button.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SliderIndex',
  data () {
    /**
     * @property {array} imgs 图片组
     * @property {number} currentIndex 当前图片的索引
     * @property {array} buttons 索引按钮
     * @property {number} timer 计时器
     */
    return {
      imgs: [
        {
          url: 'https://game.gtimg.cn/upload/adw/image/20191226/3f1715d55f8949ba04717e521bf74d20.jpeg',
          index: 0
        },
        {
          url: 'https://game.gtimg.cn/upload/adw/image/20191225/78321745e20f2f3d4c88b2ec709f1f31.jpeg',
          index: 1
        },
        {
          url: 'https://game.gtimg.cn/upload/adw/image/20191224/8247aff6cfab4abc412eecddc26a47bd.jpeg',
          index: 2
        },
        {
          url: 'https://game.gtimg.cn/upload/adw/image/20191225/f17072bc25c5979608a5d47889c9900d.jpeg',
          index: 3
        },
        {
          url: 'https://game.gtimg.cn/upload/adw/image/20191226/7e0cfc8a0a09ba56817f4bd71de77d47.jpeg',
          index: 4
        }
      ],
      currentIndex: 0,
      buttons: [
        { name: '貂蝉FMVP皮肤', index: 0 },
        { name: '双辅助体系揭秘', index: 1 },
        { name: '手绘大赛赢皮肤', index: 2 },
        { name: '信号沟通新姿势', index: 3 },
        { name: '薛伯特王者无疆', index: 4 }
      ],
      timer: null
    }
  },
  methods: {
    /**
     * @method
     * @param {string} left 图片容器的left值
     * @desc 移动图片容器
     */
    move () {
      let left = `-${this.currentIndex * 100}%`
      this.$refs.container.style.left = left
    },
    /**
     * @method
     * @param {number,string} arg 由Dom传递过来的参数，
     * 鼠标悬停事件传递的是number类型；鼠标点击事件传递的是string类型：'left' or 'right'
     * @desc 调整currentIndex的值，鼠标点击或是悬停都清空计时器，避免发生冲突
     */
    doTheAnimate (arg) {
      clearInterval(this.timer)
      this.timer = null
      // 鼠标悬停
      if (typeof arg === 'number') {
        this.currentIndex = arg
        // 鼠标点击
      } else if (typeof arg === 'string') {
        // if (arg && arg === 'left' && this.currentIndex <= 2) {
        //   this.currentIndex++
        // } else if (arg && arg === 'right' && this.currentIndex >= 1) {
        //   this.currentIndex--
        // }
        if (!this.timer) {
          this.autoAnimate()
        }
      }
      this.move()
    },
    /**
     * @method
     * @desc 自动轮播图片
     */
    autoAnimate () {
      this.timer = setInterval(() => {
        if (this.currentIndex === 4) {
          this.currentIndex = 0
        } else {
          this.currentIndex++
        }
        this.move()
      }, 3000)
    }
  },
  mounted () {
    this.autoAnimate()
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.iconfont {
  font-family: 'iconfont';
  font-size: 16px;
  font-style: normal;
}
#slider {
  position: relative;
  width: 604px;
  height: 300px;
  display: inline-block;
}
.slider-img {
  position: relative;
  width: 604px;
  height: 300px;
  overflow: hidden;
}
.slider-imgcontainer {
  position: absolute;
  left: 0;
  width: 500%;
  height: 300px;
  transition: left 0.5s linear;
}
img {
  width: 20%;
  height: 298px;
}
.slider-buttons {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -42px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slider-imgindex {
  cursor: pointer;
  width: 120.8px;
  height: 44px;
  line-height: 44px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  color: #b1b2be;
  transition: all 0.3s linear;
  font-size: 14px;
}
.slider-imgindex-active {
  width: 120.8px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  color: #f3c258;
}

</style>
